.banner{
    /*height: 500px;*/
    /*background-color: #2796e5;*/
    /*background-image: url("../img/indexBanner.jpg");*/
    /*background-position: center;*/
    /*background-size: cover;*/
    /*background-repeat: no-repeat;*/
}

.banner img{
    width: 100%;
}

.index-title{
    margin-bottom: 20px;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    font-size: 35px;
}
.index-title.course{
    color: #1aa4a2;
}
.index-title.comment{
    color: #DC485A;
}
.index-title.coach{
    color: #2796E5;
}


.index-title-des{
    font-size: 18px;
    text-align: center;
}

/*course*/

.course-container{
    margin-top: 56px;
}

.carousel-container {
    margin: 0 auto;
    position:relative;
    width:1140px;
}
.course-container .btn{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-image: url("../img/btn.png");
    height: 30px;
    width: 240px;
    background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    background-size: contain;
    transform: translateY(-30px);
    z-index: 1;
    font-size: 0;
}

.course-container .carousel-btn{
    display: inline-block;
    width: 50%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.course-container .line{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-image: url("../img/line.png");
    height: 175px;
    width: 900px;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-170px);
    z-index: -1;
}
.carousel-main {
    margin-top: 76px;
    height:420px;
    width:1140px;
    position:relative;
    font-size:12px;
    font-family: Arial;
}

.carousel-feature {
    position:absolute;
    top:-1000px;
    left:-1000px;
    border-radius:10px;
    cursor:pointer;
    text-align:center;
    box-shadow: 0 10px 30px rgba(0,0,0,.3);
}

.carousel-image {
    border:0;
    display:block;
}

.course-info-wrapper{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .3);
    padding-top: 25%;
    font-size: 20px;
    color: #fff;
    opacity: 0;
    transition: all .3s ease-in;
}

.course-info-wrapper:hover{
    opacity: 1;
}

.course-info-wrapper span+ span{
    margin-left: 20px;
}

/*commemt*/
.comment-container{
    margin-top: 90px;
    margin-bottom: 40px;
}

.comment-container .comment-wrapper{
    margin-top: 45px;
}

.comment-wrapper .comment{
    position: relative;
    float: left;
    margin-bottom: 40px;
    width: 50%;
}

.comment-wrapper .comment:nth-child(2n) {
    text-align: right;
}

.comment-wrapper .comment .comment-border,
.comment-wrapper .comment .comment-header,
.comment-wrapper .comment .title-container,
.comment-wrapper .comment .detail
{
    position: absolute;
}

.comment-wrapper .comment .comment-border > img{
    z-index: 1;
    position: relative;
}

.comment-wrapper .title-container{
    color: #fff;
    -webkit-font-smoothing: antialiased;
    text-align: left;
    z-index: 2;
}

.comment-wrapper .comment .detail{
    width: 100%;
    height: calc(100% - 3px);
    z-index: 0;
    background: rgba(0,0,0,.7);
    overflow: hidden;
    color: #fff;
    opacity: 0;
    transition: all .5s ease-in;
}

.comment-wrapper .comment:hover .detail{
    opacity: 1;
}

.comment-wrapper .comment .desc{
    position: relative;
    font-size: 13px;
    line-height: 1.5;
}

.comment-wrapper .comment .title-container .title{
    margin: 0;
    font-size: 18px;
}

.comment-wrapper .comment .title-container .desc{
    margin: 0;
    font-size: 13px;
}

.comment-wrapper .comment:nth-child(1) .comment-border {
    top: 0;
    left: 0;
    margin: 75px 0 0 53px;
}

.comment-wrapper .comment:nth-child(1) .comment-header{
    right: 60px;
    top: 210px;
}

.comment-wrapper .comment:nth-child(1) .title-container{
    left: 358px;
    top: 27px;
}

.comment-wrapper .comment:nth-child(1) .comment-border .detail .desc{
    width: 270px;
    margin-top: 50px;
    margin-left: 70px;
}

.comment-wrapper .comment:nth-child(1) .comment-border .detail .desc:before,
.comment-wrapper .comment:nth-child(1) .comment-border .detail .desc:after{
    position: absolute;
    font-size: 30px;
}

.comment-wrapper .comment:nth-child(1) .comment-border .detail .desc:before{
    content: '"';
    transform: translateY(-20px) translateX(-15px);
}

.comment-wrapper .comment:nth-child(1) .comment-border .detail .desc:after{
    content: '"';
    transform: translateX(10px);
    right: 0;
}

.comment-wrapper .comment:nth-child(1) .comment-border .detail .user-info{
    width: 260px;
    margin-left: 70px;
    font-size: 12px;
    text-align: right;
}

.comment-wrapper .comment:nth-child(2) .comment-border {
    top: 75px;
    right: 60px;
}

.comment-wrapper .comment:nth-child(2) .comment-header{
    top: 210px;
    left: 50px;
}

.comment-wrapper .comment:nth-child(2) .title-container{
    left: 10px;
    top: 27px;
}

.comment-wrapper .comment:nth-child(2) .comment-border .detail .desc{
    width: 270px;
    margin-top: 50px;
    margin-left: 145px;
}

.comment-wrapper .comment:nth-child(2) .comment-border .detail .desc:before,
.comment-wrapper .comment:nth-child(2) .comment-border .detail .desc:after{
    position: absolute;
    font-size: 30px;
}

.comment-wrapper .comment:nth-child(2) .comment-border .detail .desc:before{
    content: '"';
    transform: translateY(-20px) translateX(-15px);
}

.comment-wrapper .comment:nth-child(2) .comment-border .detail .desc:after{
    content: '"';
    transform: translateX(20px);
    right: 0;
}

.comment-wrapper .comment:nth-child(2) .comment-border .detail .user-info{
    width: 270px;
    margin-left: 145px;
    font-size: 12px;
    text-align: right;
}


.comment-wrapper .comment:nth-child(3) .comment-border {
    left: 0;
    top: 0;
    margin: 24px 0 0 20px;
}

.comment-wrapper .comment:nth-child(3) .comment-header{
    top: 165px;
    right: 60px;
}

.comment-wrapper .comment:nth-child(3) .title-container{
    left: 406px;
    top: 27px;
}

.comment-wrapper .comment:nth-child(3) .comment-border .detail .desc{
    width: 270px;
    margin-top: 50px;
    margin-left: 100px;
}

.comment-wrapper .comment:nth-child(3) .comment-border .detail .desc:before,
.comment-wrapper .comment:nth-child(3) .comment-border .detail .desc:after{
    position: absolute;
    font-size: 30px;
}

.comment-wrapper .comment:nth-child(3) .comment-border .detail .desc:before{
    content: '"';
    transform: translateY(-20px) translateX(-15px);
}

.comment-wrapper .comment:nth-child(3) .comment-border .detail .desc:after{
    content: '"';
    transform: translateX(10px);
    right: 0;
}

.comment-wrapper .comment:nth-child(3) .comment-border .detail .user-info{
    width: 260px;
    margin-left: 100px;
    font-size: 12px;
    text-align: right;
}

.comment-wrapper .comment:nth-child(4) .comment-border {
    top: 24px;
    right: 24px;
}

.comment-wrapper .comment:nth-child(4) .comment-header{
    top: 165px;
    left: 50px;
}

.comment-wrapper .comment:nth-child(4) .title-container{
    left: 20px;
    top: 27px;
}

.comment-wrapper .comment:nth-child(4) .comment-border .detail .desc{
    width: 300px;
    margin-top: 50px;
    margin-left: 160px;
    text-align: left;
}

.comment-wrapper .comment:nth-child(4) .comment-border .detail .desc:before,
.comment-wrapper .comment:nth-child(4) .comment-border .detail .desc:after{
    position: absolute;
    font-size: 30px;
}

.comment-wrapper .comment:nth-child(4) .comment-border .detail .desc:before{
    content: '"';
    transform: translateY(-20px) translateX(-15px);
}

.comment-wrapper .comment:nth-child(4) .comment-border .detail .desc:after{
    content: '"';
    transform: translateX(10px);
    right: 0;
}

.comment-wrapper .comment:nth-child(4) .comment-border .detail .user-info{
    width: 300px;
    margin-left: 160px;
    font-size: 12px;
    text-align: right;
}

/*coach*/
.coach-container .swiper-container{
    margin-top: 55px;
    background-image: url("../img/coach-border.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.coach-container .coach-swiper{
    margin: 70px 110px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.coach-container .swiper-slide{
    padding-bottom: 30px;
    text-align: center;
}

.coach-container .coach-swiper .coach-info{
    position: relative;
    display: block;
    margin: 0 auto;
    width: 240px;
    height: 320px;
    box-shadow: 0 2px 30px rgba(0,0,0, .3);
    overflow: hidden;
}
.coach-container .coach-swiper .coach-info img{
    width: 100%;
}

.coach-swiper .coach-info .coach-detail{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.5);
    color: #fff;
    font-size: 12px;
    opacity: 0;
    transition: all .2s ease-in;
}

.coach-swiper .coach-info .coach-detail:hover{
    opacity: 1;
}

.coach-info .coach-detail .honor{
    margin-bottom: 10px;
}

.coach-info .coach-detail .honor:nth-child(1) {
    margin-top: 30px;
}

.coach-info .coach-detail .name {
    margin-top: 40px;
    font-size: 26px;
}

.coach-detail .name span{
    padding: 5px 15px;
    border-radius: 5px;
    background-color: #2796e5;
    cursor: pointer;
    transition: all .2s ease-in;
}

.coach-detail .name span:hover{
    padding: 5px 15px;
    border-radius: 5px;
    background-color: #e5a227;
}

.coach-info .coach-detail .tags{
    margin-top: 50px;
}

.coach-info .coach-detail .tags span {
    padding: 2px 5px;
    background: #464444;
    border-radius: 3px;
    color: #999;
}

.coach-info .coach-detail .tags span+ span{
    margin-left: 10px;
}

.swiper-button-next, .swiper-button-prev{
    width: 40px;
    height: 73px;
}

.swiper-button-prev, .swiper-container-rtl .swiper-button-next{
    left: 10px;
    background-image: url("../img/left-arrow.png");
}

.swiper-button-next, .swiper-container-rtl .swiper-button-prev{
    right: 10px;
    background-image: url("../img/right-arrow.png");
}
